import PropTypes from 'prop-types';
import { Popconfirm, Space, Tooltip } from 'antd';
import type { EventInfo, EventType, TableRecord } from '../../utils/types';
import IconsDynamic from '../IconsDynamic';

const AllOperation = (props: any) => {
  const operation = props.operation;

  let returnComponent = <></>;
  if (!operation) {
    console.error('operation不能为空。');
    return returnComponent;
  }
  // console.debug('AllOperation', props);
  switch (operation) {
    case 'detail':
      returnComponent = (
        <Tooltip placement="top" title="详情">
          <>
            <IconsDynamic key="FileSearchOutlined" iconName="FileSearchOutlined" />
          </>
        </Tooltip>
      );
      break;
    case 'edit':
      returnComponent = (
        <Tooltip placement="top" title="编辑">
          <>
            <IconsDynamic key="EditOutlined" iconName="EditOutlined" />
          </>
        </Tooltip>
      );
      break;
    case 'delete':
      returnComponent = (
        <Tooltip placement="top" title="删除">
          <>
            <IconsDynamic key="DeleteOutlined" iconName="DeleteOutlined" />
          </>
        </Tooltip>
      );
      break;
  }
  return returnComponent;
};
AllOperation.propTypes = {
  operation: PropTypes.string,
};

export const OperationDynamic = (operationArr: EventType[], onEvent: (eventInfo: EventInfo) => void, tableRecord: TableRecord) => {
  if (!operationArr) {
    console.error('operationArr不能为空。');
    return <></>;
  }
  const myOnEvent = (type: EventType) => {
    onEvent({ type, tableRecord });
  };
  const renderPopconfirm = (operationItem: EventType, index: number, text: string) => (
    <Popconfirm onConfirm={() => myOnEvent(operationItem)} key={'popconfirm_' + index} title={`确认${text}吗?`} okText="是" cancelText="否">
      <a>
        <AllOperation operation={operationItem} key={index} />
      </a>
    </Popconfirm>
  );
  // console.debug('OperationDynamic', operationArr, onEvent, tableRecord);
  return (
    <>
      <Space>
        {operationArr?.map((operationItem: EventType, index: number) => {
          if (operationItem === 'delete') {
            return renderPopconfirm(operationItem, index, '删除');
          }
          return (
            <a onClick={() => myOnEvent(operationItem)} key={'operation_' + index}>
              <AllOperation operation={operationItem} />
            </a>
          );
        })}
      </Space>
    </>
  );
};
